import React, { FC, useRef, useEffect, useState } from 'react'
import "./Zoom.scss"
import useMousePic from '../../hooks/useMousePic'
import { FullscreenOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import FullScreen from './FullScreen';
interface IProps {
    data: any
}
export const fullScreenCtx = React.createContext({ isFullScreen: false, setIsFullScreen: (state: boolean) => { } })
const Zoom: FC<IProps> = ({ data }) => {
    const refZoom = useRef<any>()
    const { isEnter } = useMousePic({ ref: refZoom })
    const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
    const viewFullScreen = () => { setIsFullScreen(true) }
    return <fullScreenCtx.Provider value={{ isFullScreen, setIsFullScreen } as any}>
        <div className="im_show_pic_modal_left" ref={refZoom}>
            <img src={data.src} alt="" />
            <div className={`im_show_pic_modal_left_dark ${isEnter ? 'active' : 'normal'}`}>
                <Button icon={<FullscreenOutlined size={20} />}
                    className="im_show_pic_modal_left_dark_btn" onClick={viewFullScreen}></Button>
            </div>
            <FullScreen imgSrc={data.src}></FullScreen>
        </div>
    </fullScreenCtx.Provider>

}

export default Zoom